<template>
	<view class="joinGame">
		<view class="banner">
			<uni-nav-bar statusBar color="#fff" title="报名" :border="false" left-icon="left" @clickLeft="back"></uni-nav-bar>
			<view class="game_info">
				<view class="game_name">{{ orderInfo.storeName || '' }}</view>
				<view class="time">时间：{{ orderInfo.activityStartTime || '' }}</view>
				<view class="">地址：{{ orderInfo.address || '' }}</view>
			</view>
		</view>
		<view class="contnet">
			<view class="join_count">
				<view class="count_head">
					<view class="count_title">单价</view>
					<view class="price">
						<text>￥</text>
						<text class="price_val">{{ orderInfo.payPrice || 0}}</text>
					</view>
				</view>
				<view class="count_head" style="margin: 30rpx 0;font-weight: 500;">
					<view class="count_title">报名人数</view>
					<view>
						{{ studentList.length}}人
					</view>
				</view>
				<!-- <view class="set_count">
					<view class="">人数选择</view>
					<view class="count_box">
						<view :class="{'no_count':this.studentList.length?count==this.studentList.length:count==1}" @tap="chooseNum(1)">-</view>
						<input v-model="count" type="text" />
						<view class="" @tap="count++">+</view>
					</view>
				</view> -->
				<view class="tips">
					<image src="../../../static/home/gantanhao.png" mode=""></image>
					<text>活动开始前24小时可随时退订</text>
				</view>
				<view class="coupon" @tap="useCoupon">
					<view class="coupon_title">优惠券</view>
					<view class="price gray" v-if="!couponsList || !couponsList.length">暂无优惠券</view>
					<view class="price" v-else>
						<view class="price_val" v-if="couponId">-{{ couponObj.money }}元</view>
						<view class="price_val gray" v-else>选择优惠券</view>
						<uni-icons type="right" color="#B3B3B3" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="student_info">
				<view class="student_title">学生信息</view>
				<view class="student_list">
					<block v-for="(v,i) in studentList" :key="i">
						<view class="item">
							<uni-icons type="minus-filled" color="#999999" size="30"
								@click="delStudentInfo(i)"></uni-icons>
							<view class="student">
								<view class="">
									<view class="student_name">{{ v.studentName || '' }}</view>
									<view class="gender">
										<text v-if="v.studentGender==1">男</text>
										<text class="girl" v-else>女</text>
									</view>
								</view>
								<view class="identity_card">身份证 {{ v.studentCardId || '' }}</view>
							</view>
						</view>
					</block>
				</view>
				<view class="add_btn" @tap="addStudent">
					<uni-icons type="plus" color="#2E80FE" size="20"></uni-icons>
					<text>{{orderInfo&&orderInfo.isParentChild?'添加成员信息':'添加学生信息'}}</text>
				</view>
			</view>
		</view>
		<!-- 优惠券弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="list">
				<block v-for="(v,i) in couponsList" :key="i">
					<view :class="[v.isUse ? 'activeClass' : '', 'coupon_item']">
						<view class="item_t">
							<view class="">
								<view class="coupon_title">{{ v.name }}</view>
								<view class="use_time">{{ v.useStartTimeStr }}-{{ v.useEndTimeStr }}</view>
							</view>
							<view class="">
								<view class="price">
									<text>￥</text>
									<text class="price_val">{{ v.money }}</text>
								</view>
								<view class="use_limits">满{{ v.minPrice }}可用</view>
							</view>
						</view>
						<view class="item_b">
							<view class="use_desc">
								<view class="desc_title">
									<text>本券仅限商城内小程序使用</text>
									<image src="../../../static/mine/xia.png" mode="" :class="{'open_arrow':v.isOpen}"
										@tap="openDesc(v,i)"></image>
								</view>
								<view class="desc_text" v-if="v.isOpen">
									{{v.useIntroduce}}
								</view>
							</view>
							<view class="coupon_status" @tap="checkCoupon(v,i)" v-if="v.isUse">
								<uni-icons type="checkbox-filled" color="#2E80FE" size="24" v-if="v.select"></uni-icons>
								<uni-icons type="circle" size="24" v-else></uni-icons>
							</view>
						</view>
					</view>
				</block>
			</view>
		</uni-popup>

		<view class="between a-c btn-box">
			<view class="flex a-c btn-price">
				<view class="">￥</view>
				<view class="price-num fw-b">{{ payFee || 0 }}</view>
			</view>
			<button class="pay-btn fw-b" @click="toPay">去付款</button>
		</view>
		<view style="height: 160rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 1,
				list: [{
					gender: 1
				}, {
					gender: 2
				}],
				preOrderNo: '',
				orderInfo: null,
				couponsList: [],
				joinerList: [],
				checkJoin: [],
				listData: {
					limit: 10,
					page: 1,
					search: '',
				},
				studentList: [],
				studentIdList: [],
				couponId: 0,
				payFee: 0,
				couponObj: null,
			};
		},
		onUnload() {
			uni.$off('studentId');
			// uni.$off('couponId');
		},
		onLoad(e) {
			if (e.preOrderNo === undefined || e.preOrderNo === 'undefined') return uni.showToast({
				icon: 'none',
				title: '缺少参数无法查看赛事详情',
				complete: () => {
					setTimeout(v => {
						uni.navigateBack();
					}, 2500)
				}
			})
			this.preOrderNo = e.preOrderNo;
			this.getPreOrder();
			uni.$on('studentId', (data) => {
				let list = uni.getStorageSync('studentList');
				if (list) {
					this.studentList.push(...list)
					this.studentList = Array.from(new Set(this.studentList.map(JSON.stringify)), JSON.parse)
					uni.removeStorageSync('studentList');
				}
				if (data) {
					this.studentIdList.push(...data.split(','))
				}
				if (this.studentIdList.length > 1) {
					this.studentIdList = [...new Set(this.studentIdList)]
				}
				this.count = this.studentList.length;
			})
			// uni.$on('couponId', (id) => {
			// 	this.couponId = id;
			// 	var obj = uni.getStorageSync('couponObj');
			// 	if (obj) {
			// 		this.couponObj = obj;
			// 		uni.removeStorageSync('couponObj');
			// 	}
			// })
		},

		onShow() {
			this.computedPrice();
		},
		computed: {
			totalPrice() {
				const {
					orderInfo,
					count
				} = this;
				var num = 0;
				if (orderInfo) {
					num = orderInfo.payPrice * count;
				}
				return num
			},
			watchChange() {


			},
		},
		methods: {
			checkCoupon(item, index) {
				this.couponsList.forEach((v, i) => {
					if (i == index) {
						if (v.select) {
							this.$set(this.couponsList[i], 'select', false)
							this.couponId = ''
							this.couponObj = {}
						} else {
							this.$set(this.couponsList[i], 'select', true)
							this.couponId = v.couponId
							this.couponObj = v
						}
						this.computedPrice();
					} else {
						this.$set(this.couponsList[i], 'select', false)
					}
				})
				this.$refs.popup.close()
			},
			useCoupon() {
				this.$refs.popup.open()
				// this.$to(`/pages/index/useCoupon/useCoupon?preOrderNo=${this.preOrderNo}`)
			},
			openDesc(item, index) {
				this.couponsList.forEach((v, i) => {
					if (i == index) {
						var boolean = this.couponsList[i].isOpen
						this.$set(this.couponsList[i], 'isOpen', !boolean)
					} else {
						this.$set(this.couponsList[i], 'isOpen', false)
					}
				})
			},
			// 创建订单 
			async createOrder() {
				const res = await this.$api.post(`order/create`, {
					couponId: this.couponId,
					joinerIds: this.studentIdList,
					payChannel: 'routine',
					payType: 'weixin',
					preOrderNo: this.preOrderNo
				});
				if (res.code == 200) {
					const {
						orderNo,
						orderId,
						payPrice
					} = res.data
					uni.redirectTo({
						url:`/pages/index/payOrder?orderNo=${orderNo}&orderId=${orderId}&payPrice=${payPrice}`
					})
					console.log(res, "res---预下单")
				} else {
					this.showToast(res.message)
				}
			},
			addStudent() {
				if (this.studentIdList.length) {
					uni.setStorageSync('studentIdList', this.studentIdList);
				}
				this.$to(`/pages/index/studentList/studentList?activityType=${this.orderInfo.isParentChild?1:0}`)

			},
			async getPreOrder() {
				const res = await this.$api.get(`order/load/pre/${this.preOrderNo}`);
				if (res.code == 200) {
					this.orderInfo = res.data.orderActivityVo;
					this.couponsList = res.data.orderActivityVo.couponUserResponseList;
				}
			},
			async getList() {
				const res = await this.$api.get('joiner/list', this.listData);
				if (res.code == 200) {
					if (res.data.list && res.data.list.length) {
						res.data.list.forEach(v => {
							v.checked = false;
						})
					}
					this.list = res.data.list;
				}
			},
			chooseNum(i) {
				if (this.studentList.length) {
					this.count > this.studentList.length ? this.count-- : this.studentList.length
				} else {
					this.count > 1 ? this.count-- : 1
				}
			},
			delStudentInfo(i) {
				var that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认将当前学生移出报名名单？',
					success: (v) => {
						if (v.confirm) {
							that.studentList.splice(i, 1);
							that.studentIdList.splice(i, 1);
							this.computedPrice()
						}
					}
				})
			},
			async computedPrice() {
				var arr = [];
				this.studentIdList.forEach(v => {
					arr.push(parseInt(v));
				})
				const res = await this.$api.post('order/computed/price', {
					couponId: this.couponId,
					joinerIds: arr,
					preOrderNo: this.preOrderNo
				});
				if (res.code == 200) {
					this.payFee = res.data.payFee;
				}
			},
			async toPay() {
				// const res = await this.$api
				console.log(this.studentIdList)
				if (this.studentList.length == 0) {
					return this.showToast('请添加学生信息')
				}
				this.createOrder()
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.list {
		background: #fff;
		border-radius: 30rpx 30rpx;
		padding: 30rpx 26rpx 30rpx;
		box-sizing: border-box;

		.coupon_item {
			width: 100%;
			border-radius: 20rpx;
			background-color: #f7f7f7;
			padding: 36rpx 36rpx 20rpx;
			box-sizing: border-box;
			margin-bottom: 14rpx;

			.item_t {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 46rpx;

				.coupon_title {
					font-size: 30rpx;
					line-height: 30rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.use_time {
					font-size: 22rpx;
					line-height: 22rpx;
					color: #999999;
				}

				.price {
					font-size: 26rpx;
					font-weight: bold;
					color: #FF4747;
					margin-bottom: 10rpx;

					.price_val {
						font-size: 60rpx;
						line-height: 32rpx;
					}
				}

				.use_limits {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #B3B3B3;
				}
			}

			.item_b {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.use_desc {
					.desc_title {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #999999;
						margin-bottom: 14rpx;

						image {
							width: 20rpx;
							height: 11rpx;
							margin-left: 40rpx;
						}

						.open_arrow {
							transform: rotate(180deg);
						}
					}

					.desc_text {
						width: 424rpx;
						font-size: 22rpx;
						color: #999999;
						line-height: 26rpx;
					}
				}
			}
		}

		.activeClass {
			background: #E8F4FF;
		}
	}

	.joinGame {
		.banner {
			width: 100%;
			height: 300rpx;
			background: linear-gradient(to bottom, #2E80FE, #F7F7F7);
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;

			uni-nav-bar {
				width: 100%;
			}

			/deep/.uni-navbar {
				width: 100%;

				// opacity: 0;
				.uni-navbar__content {
					background-color: transparent !important;

					.uni-navbar__header {
						background-color: transparent !important;
					}
				}
			}

			.game_info {
				width: 696rpx;
				height: 174rpx;
				background-color: #fff;
				border-radius: 14rpx;
				padding: 24rpx 30rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				line-height: 24rpx;
				display: flex;
				flex-direction: column;

				.game_name {
					font-size: 32rpx;
					line-height: 32rpx;
					font-weight: bold;
					flex: 1;
					margin-bottom: 20rpx;
				}

				.time {
					margin-bottom: 16rpx;
				}
			}
		}

		.contnet {
			padding: 0 26rpx;
			box-sizing: border-box;

			.join_count {
				width: 100%;
				height: 300rpx;
				border-radius: 14rpx;
				background-color: #fff;
				padding: 28rpx 30rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.count_head {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.count_title {
						font-size: 32rpx;
						font-weight: bold;
						line-height: 32rpx;
					}

					.price {
						font-size: 24rpx;
						font-weight: bold;
						color: #FF0404;

						.price_val {
							font-size: 40rpx;
							line-height: 20rpx;
						}
					}

				}

				.set_count {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					color: #999;
					padding: 44rpx 0 20rpx;

					.count_box {
						display: flex;
						align-items: center;
						border: 1rpx solid #E6E6E6;
						border-radius: 6rpx;
						color: #333333;

						view {
							width: 48rpx;
							height: 48rpx;
							text-align: center;
							line-height: 38rpx;
							font-size: 60rpx;
						}

						.no_count {
							color: #E6E6E6;
						}

						input {
							width: 66rpx;
							height: 48rpx;
							border-left: 1rpx solid #E6E6E6;
							border-right: 1rpx solid #E6E6E6;
							text-align: center;
							font-size: 30rpx;
							font-weight: bold;
						}
					}
				}

				.tips {
					width: 100%;
					height: 46rpx;
					background-color: #FFF2E2;
					border-radius: 6rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 14rpx;
					}

					text {
						font-size: 22rpx;
						color: #FF8F01;
					}
				}

				.coupon {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					line-height: 26rpx;

					.price {
						display: flex;
						align-items: center;

						.price_val {
							color: #F84242;
							margin-right: 20rpx;
						}
					}

					.gray {
						color: #999;
					}
				}
			}

			.student_info {
				padding: 22rpx 24rpx;
				border-radius: 20rpx;
				background-color: #fff;

				.student_title {
					font-size: 30rpx;
					font-weight: bold;
					padding-bottom: 24rpx;
					border-bottom: 1rpx solid #F5F5F5;
				}

				.student_list {
					.item {
						display: flex;
						align-items: center;
						padding: 28rpx 0;

						.student {
							flex: 1;
							margin: 0 26rpx;

							>view {
								display: flex;
								align-items: center;

								.student_name {
									font-size: 30rpx;
									line-height: 30rpx;
									font-weight: bold;
								}

								.gender {
									width: 54rpx;
									height: 34rpx;
									border-radius: 6rpx;
									border: 1rpx solid #E6E6E6;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 24rpx;
									color: #2E80FE;
									margin-left: 32rpx;

									.girl {
										color: #FE2E42;
									}
								}
							}

							.identity_card {
								font-size: 24rpx;
								color: #999999;
								line-height: 24rpx;
								padding-top: 20rpx;
							}
						}
					}

				}

				.add_btn {
					padding: 52rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
						color: #2E80FE;
					}
				}
			}
		}

		.btn-box {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 16rpx 50rpx;
			padding-bottom: 60rpx;
			background-color: #FFF;

			.btn-price {
				color: #FF0404;
				font-size: 24rpx;

				.price-num {
					font-size: 40rpx;
				}
			}

			.pay-btn {
				margin: 0;
				padding: 0;
				width: 160rpx;
				height: 67rpx;
				line-height: 67rpx;
				text-align: center;
				color: #FFF;
				border-radius: 33rpx;
				font-size: 32rpx;
				background-image: linear-gradient(to left, #589AFF, #3DD8FF);
			}
		}
	}
</style>